<template>
  <el-container>
    <el-main>
      <el-row type="flex" justify="center" v-for="item in items" :key="item.msg">
        <el-col class="index-item" :span="16" :xs="20" :sm="18" :md="16" :lg="14" :xl="12" v-html="item.html">{{ item.msg }}</el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
export default {
  name: 'Index',
  components: {
    Header,
    Footer
  },
  data () {
    return {
      msg: '云雀 测试文本',
      items: [
        {
          msg: '测试文本1',
          html: '<h1>测试文本1</h1>'
        },
        {
          msg: '测试文本2',
          html: '<h1>测试文本2</h1>'
        }
      ]
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.el-main {
  min-height: calc(100vh - 149px);
}
.index-item {
  background-color: #fdfdfd;
  // line-height: 500px;
  height: 300px;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 5px;
  max-width: 1200px;
  text-align: center;
}
</style>
